<template>
  <div
    class="flex flex-col justify-around items-start"
    :style="{ width: 'props.width', height: props.height }"
  >
    <div
      :style="{ width: '100%', height: '30px' }"
      class="flex justify-start items-center"
      v-for="(it, index) in datas"
      :key="index"
    >
      <SvgIcon :iconClass="it.icon" size="24"></SvgIcon>
      <span class="text-[14px] mx-[8px] text-[#fff]">{{ it.title }}</span>
      <span class="text-[14px] text-[#87abff]">{{ it.status }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
const datas = reactive([
  {
    icon: "ruzhan_leiji",
    title: "运行状态",
    status: "正常运行",
  },
  {
    icon: "ruzhan_leiji",
    title: "系统盘",
    status: "20G/120G",
  },
  {
    icon: "ruzhan_leiji",
    title: "数据盘",
    status: "20G/120G",
  },
]);
watch(
  () => props.responseData,
  () => {
    if (props.responseData) {
      datas[0].status = props.responseData.runningStatus;
      datas[1].status = props.responseData.system;
      datas[2].status = props.responseData.datas;
    }
  },
  {
    deep: true,
  }
);
// const states = computed({
//   get: () => props.models,
// });
</script>

<style scoped lang="scss"></style>
